window.onload = function(){
	let allDiv = document.querySelectorAll("div");
	let isFail = false; //判断是否失败 true为失败，
	let isIndex = true; //判断是否为主页面(设置难度页面)
	let HeaderRowStart = 1;	//行网格线开始位置
	let HeaderColumnStart = 6; //列网格线开始位置
	let HeaderRowEnd = 2;	//行网格线结束位置
	let HeaderColumnEnd = 7; //列网格线结束位置
	allDiv[6].style.gridArea = HeaderRowStart + "/" + HeaderColumnStart  + "/" + HeaderRowEnd + "/" + HeaderColumnEnd;
	let snakeBodyLength = 3; //蛇的身体长度
	let NewSnakeBodyLength = 3; //用来比较蛇的长度是否增长
	let timer; //定时器开关
	let fx = "R"; //方向
	let snakeFood = document.getElementById("snakeFood"); //绑定食物
	let options = document.querySelectorAll(".options h1"); //绑定文字
	let difficulty = document.getElementById("difficulty");//绑定难度选项
	let difficultyArr = [["地狱",10],["困难",50],["普通",100],["简单",500]];
	let difficultyOption = 2;
	let isStart = false; 
	
	//初始化
	function init(){
		 isFail = false; //判断是否失败 true为失败，		
		 HeaderRowStart = 1;	//行网格线开始位置
		 HeaderColumnStart = 6; //列网格线开始位置
		 HeaderRowEnd = 2;	//行网格线结束位置
		 HeaderColumnEnd = 7; //列网格线结束位置
		 for(let i = 0;i<3;i++){
			 allDiv[6+i].style.gridArea = HeaderRowStart + "/" + (HeaderColumnStart-i)  + "/" + HeaderRowEnd + "/" + (HeaderColumnEnd-i);
		 }
		
		 snakeBodyLength = 3; //蛇的身体长度
		 NewSnakeBodyLength = 3; //用来比较蛇的长度是否增长
		 fx = "R"; //方向
	};
	init();
	//食物随机出现
	snakeFoodRow = Math.floor((Math.random()*21)+1);
	snakeFoodColumn = Math.floor((Math.random()*32)+1);
	snakeFood.style.gridArea = snakeFoodRow + "/" + snakeFoodColumn  + "/" + (snakeFoodRow+1) + "/" + (snakeFoodColumn+1);
	
	//定时器
	function timermove(){		
	timer = setInterval(function(){
	if(isFail){
		options[0].parentNode.style.display = "";
		options[0].innerText="游戏失败，按空格重新开始游戏";
		options[0].style.color="red";
		options[0].parentNode.style.left="25%";
		options[1].style.display = "none";
		clearInterval(timer);
		
	}else if(isStart){
		// parentNode 当前节点的父节点
		options[0].parentNode.style.display = "none";
	}
	
	//方向判断
	switch (fx){
		case "L":
			HeaderColumnStart--;
			HeaderColumnEnd--;
			break;
		case "U":
			HeaderRowStart--;
			HeaderRowEnd--;
			break;
		case "R":
			HeaderColumnStart++;
			HeaderColumnEnd++;
			break;
		case "D":
			HeaderRowStart++;
			HeaderRowEnd++;
			break;			
	}
	
	//边界判断
	if(HeaderColumnStart>33){
		HeaderColumnStart = 1;
		HeaderColumnEnd = 2;
	}else if(HeaderColumnStart<1){
		HeaderColumnStart = 33;
		HeaderColumnEnd = 34;
	}else if(HeaderRowStart>22){
		HeaderRowStart = 1;
		HeaderRowEnd = 2;
	}else if(HeaderRowStart<1){
		HeaderRowStart = 22;
		HeaderRowEnd = 23;
	}
	
	//吃食物(食物坐标与蛇头部坐标重合，蛇的长度加一，食物坐标重新生成)
	if(allDiv[6].style.gridArea == snakeFood.style.gridArea){
		snakeBodyLength++;
		snakeFoodRow = Math.floor((Math.random()*21)+1);
		snakeFoodColumn = Math.floor((Math.random()*32)+1);
		snakeFood.style.gridArea = snakeFoodRow + "/" + snakeFoodColumn  + "/" + (snakeFoodRow+1) + "/" + (snakeFoodColumn+1);
	}
	
	
	
	//蛇长度增加，则增加一个div	
	if(snakeBodyLength>NewSnakeBodyLength){
	//创建新的蛇身
	let div = document.createElement("div");
	//给新的蛇身添加类名
	div.className = "snakeBody";
	//将其放在食物的上面
	allDiv[5].insertBefore(div,snakeFood);
	NewSnakeBodyLength++;
	//每次长度增加，重新获取一次div
	allDiv = document.querySelectorAll("div");
	}
	
	//蛇头根据坐标移动
	if(isStart && isFail == false){		
	//蛇身随蛇头移动
	for(let i = snakeBodyLength - 1;i>0;i--){
		allDiv[i+6].style.gridArea = allDiv[i+5].style.gridArea;
	}	
		
	allDiv[6].style.gridArea = HeaderRowStart + "/" + HeaderColumnStart  + "/" + HeaderRowEnd + "/" + HeaderColumnEnd;
	}
	//失败(蛇的头部坐标与身体坐标重合，即失败)
	for(let i = 1;i<snakeBodyLength;i++){
		if(allDiv[6].style.gridArea == allDiv[6+i].style.gridArea){
			isFail = true;
			break;
		}
	}
	},difficultyArr[difficultyOption][1]);
	};
	
	
	//键盘事件
	document.onkeydown = function(event){
		event = event || window.event;
		//空格为32
		if(event.keyCode == "32"){
			
			if(isStart){				
				clearInterval(timer);
				isIndex = false;
				isStart = false;
				options[0].parentNode.style.display = "";
				options[1].style.display = "none";
				options[0].innerText="按空格继续游戏";
				options[0].parentNode.style.left="40%";
			}else if(isStart == false){
				timermove();
				isStart = true;
			}
			//如果是失败，按空格就是初始化，重新开始游戏
			if(isFail){
				init();
				clearInterval(timer);
				isStart = true;
			}			
		}
		//按Esc返回设置页面
		if(event.keyCode == "27"){
			init();
			options[0].parentNode.style.display = "";
			clearInterval(timer);
			isIndex = true;
		}
		//开始游戏才能控制方向
		if(isStart && isFail == false){
		//左上右下  37、38、39、40 (键盘控制走向并且判断不能直接反向移动)
		if(event.keyCode == 37 && !(fx == "R")){
				allDiv[6].style.background = "url(img/left.png) no-repeat";
				fx = "L";
		}else if(event.keyCode == 38 && !(fx == "D")){
				allDiv[6].style.background = "url(img/up.png) no-repeat";
				fx = "U";
		}else if(event.keyCode == 39 && !(fx == "L")){
				allDiv[6].style.background = "url(img/right.png) no-repeat";
				fx = "R";
		}else if(event.keyCode == 40 && !(fx == "U")){
				allDiv[6].style.background = "url(img/down.png) no-repeat";
				fx = "D";
		}
		}
		//游戏未开始时，左右按键设置难度
		if(isStart == false && isIndex){
			if(event.keyCode == 37){
				difficultyOption++;
			}else if(event.keyCode == 39){
				difficultyOption--;
			}
			if(difficultyOption>3){
				difficultyOption = 0;
			}else if(difficultyOption<0){
				difficultyOption = 3;
			}
			difficulty.innerText = difficultyArr[difficultyOption][0];
			
		}
	}
}